<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-pretty lang="json">结果：{{ obj }} 请打开控制台</ph-pretty>
        <ph-datetime-button :value="value" @pick="onPick" />
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-datetime-button :value="value" type="date" @pick="onPick" />
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <ph-datetime-button :value="value" type="month" @pick="onPick" />
        <ph-pretty>{{ demo3 }}</ph-pretty>
        <ph-datetime-button :value="value" type="year" @pick="onPick" />
        <ph-pretty>{{ demo4 }}</ph-pretty>
        <ph-datetime-button :value="value" type="time" @pick="onPick" />
        <ph-pretty>{{ demo5 }}</ph-pretty>
        <ph-divider>日期时间双联动</ph-divider>
        <ph-datetime-button
          :double="true"
          type="datetime"
          min="1993-05-20 06:00:00"
          max="1993-10-10 20:00:00"
          start="1993-07-05 12:00:00"
          @pick="onPick"
        />
        <ph-divider>日期双联动</ph-divider>
        <ph-datetime-button
          :double="true"
          type="date"
          min="1993-05-20"
          max="1993-10-10"
          start="1993-07-05"
          @pick="onPick"
        />
        <ph-divider>年月双联动</ph-divider>
        <ph-datetime-button
          :double="true"
          type="month"
          min="1993-05"
          max="1993-10"
          start="1993-07"
          @pick="onPick"
        />
        <ph-divider>年双联动</ph-divider>
        <ph-datetime-button
          :double="true"
          type="year"
          min="1993"
          max="1920"
          start="1995"
          @pick="onPick"
        />
        <ph-divider>时间双联动</ph-divider>
        <ph-datetime-button
          :double="true"
          type="time"
          min="06:30:00"
          max="22:30:00"
          @pick="onPick"
        />
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
        <ph-blockquote type="warning">
          note 使用须知，该按钮需要依赖PhDateTimePicker
          日期时间控件，所以需要PhDateTimePicker放在全局，具体参考
          <router-link to="/global">全局配置</router-link>
        </ph-blockquote>
        <ph-pretty>{{ dep }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhDatetimeButton,
  PhTab,
  PhTabPanel,
  PhBlockquote,
  PhDivider,
  PhView,
} from "@/index";
import * as Data from "../data/datetime";
export default defineComponent({
  components: { PhDatetimeButton, PhTab, PhTabPanel, PhBlockquote, PhView, PhDivider },
  setup() {
    const value = ref();
    const obj = ref<Record<string, number>>();

    const onPick = (b: Record<string, number>) => {
      console.log(b);
      obj.value = b;
    };
    return { onPick, value, obj, ...Data };
  },
});
</script>
